<template>
  <div>
    <el-pagination
      :page-sizes="pageSizes"
      :page-size="paginationParams.size"
      :current-page="paginationParams.current"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script lang='ts'>
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
@Component
export default class Page extends Vue {
    @Prop({ default: 0 }) total!:number
    @Prop({ default: () => [50, 100, 150, 200, 250, 300, 500] }) pageSizes!:number[]

    public paginationParams:any = {
      current: 1,
      size: this.pageSizes[0]
    }

    handleSizeChange(val: number) {
      this.paginationParams.size = val
      this.paginationChange()
    }

    handleCurrentChange(val: number) {
      this.paginationParams.current = val
      this.paginationChange()
    }

    getPaginationParams() {
      return this.paginationParams
    }

    resetPaginationParams() {
      this.paginationParams = {
        current: 1,
        size: this.pageSizes[0]
      }
    }

    @Emit()
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    paginationChange() {
    }
}
</script>

<style lang='scss' module>

</style>
